<template>
  <!-- 商品管理主容器 - 更新背景样式 -->
  <div class="goods-management-container">
    <!-- 标题区域 -->
    <div class="goods-header">
       <h4 class="goods-title text-center">
		  <span class="jump-char" style="animation-delay: 0.1s">商</span>
		  <span class="jump-char" style="animation-delay: 0.2s">品</span>
		  <span class="jump-char" style="animation-delay: 0.3s">管</span>
		  <span class="jump-char" style="animation-delay: 0.4s">理</span>
		</h4>
    </div>
    <!-- 商品表格组件 --><!-- 3.在 App 组件中使用 MyTable 组件 -->
	 <!-- 5. 在 App 组件中使用 MyTable 组件时，动态绑定 goodsList 的值 -->
	 <!-- 7. 在 App 组件中，通过具名插槽为 MyTable 组件指定标题名称 -->
    <MyTable :goodsList="goodsList" class="goods-table">
      <!-- 表头插槽 -->
      <template v-slot:header>
        <th scope="col" class="text-center">#</th>
        <th scope="col" class="text-center">商品名称</th>
        <th scope="col" class="text-center">价格</th>
        <th scope="col" class="text-center">标签</th>
        <th scope="col" class="text-center">操作</th>
      </template>
      <!-- 表格内容插槽 -->
	  <!-- 10 使用渲染body插槽 作用域插槽方式渲染表格的数据-->
      <template #body="{ row, index }">
        <td class="align-middle text-center">{{ index + 1 }}</td>
        <td class="align-middle">{{ row.goods_name }}</td>
        <td class="align-middle text-center price-cell">￥{{ row.goods_price.toFixed(2) }}</td>
        <td class="align-middle tag-cell">
          <!-- 14 标签输入框（条件渲染） -->
		  <!-- 16 通过添加 v-model 指令实现数据的双向绑定 -->
		  <!-- 17 监听文本框的 blur 事件，在触发事件时，把当行数据传递进去 -->
		  <!-- 18 把当前输入的内容添加为 tag标签 -->
		  <!-- 19 清空文本框的内容。当用户在文本框中按下“Esc”按键时，清空文本框的内容 -->
          <input type="text" v-if="row.inputVisible" class="form-control form-control-sm tag-input" v-focus v-model="row.inputValue" @blur="onInputConfig(row)" @keyup.enter="onInputConfig(row)" @keyup.esc="row.inputValue = ''"/>
          <!-- 添加标签按钮（条件渲染） -->
          <button class="btn btn-outline-primary btn-sm add-tag-btn" v-else @click="row.inputVisible = true">
            +标签
          </button>
          <!-- 标签展示 -->
		  <!-- 13. 自定义渲染标签列。在 App 组件中修改渲染商品标签列 -->
          <span class="badge tag-item" v-for="item in row.tags" :key="item">
            {{ item }}
          </span>
        </td>
        <td class="align-middle text-center">
          <!-- 删除按钮 --><!-- 11 在 App 组件中修改<button>标签的代码，添加 click 事件 -->
          <button type="button" class="btn btn-outline-danger btn-sm delete-btn" @click="onRemove(row.id)">
            删除
          </button>
        </td>
      </template>
    </MyTable>
  </div>
</template>
<script setup>
// 2.在 App 组件中导入并注册 MyTable 组件
import MyTable from './components/MyTable.vue'
import { ref } from 'vue'
// 商品列表数据 1.定义列表数据
const goodsList = ref([
  {
    id: 1,
    goods_name: '夏季专柜同款女鞋',
    goods_price: 298,
    tags: ['舒适', '透气'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 2,
    goods_name: '冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋',
    goods_price: 89,
    tags: ['保暖', '防滑'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 3,
    goods_name: '秋冬新款女士毛衣 套头宽松针织衫 简约上衣',
    goods_price: 199,
    tags: ['秋冬', '毛衣'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 4,
    goods_name: '2023春秋装新款大码女装 衬衫 上衣',
    goods_price: 19,
    tags: ['雪纺衫', '打底'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 5,
    goods_name: '长款长袖圆领女士毛衣 2022秋装新款假两件连衣裙',
    goods_price: 178,
    tags: ['圆领', '连衣裙'],
    inputVisible: false,
    inputValue: ''
  }
])
/**
 * 删除商品
 * @param {number} id - 商品ID
 * 12 在 App 组件的中声明 onRemove()方法，实现商品数据的删除
 */
const onRemove = id => {
  goodsList.value = goodsList.value.filter(item => item.id != id)
}
/**
 * 自定义指令 - 自动聚焦
 * 这个函数接受一个参数 el（通常是一个 DOM 元素）
 * 调用该元素的 focus() 方法，使该元素获得焦点
 * 15. 文本框自动获取焦点，编写自定义指令
 */
const vFocus = el => { 
  el.focus() 
}
/**
 * 处理标签输入配置
 * @param {object} row - 当前行数据
 * 17监听文本框的 blur 事件，在触发事件时，把当行数据传递进去，将文本框中数据保存并清空，实现标签的添加
 */
const onInputConfig = row => {
  const val = row.inputValue.trim()
  row.inputValue = ''
  row.inputVisible = false
  // 验证输入值
  if (!val || row.tags.includes(val)) { return }
  // 添加新标签
  // 18 把当前输入的内容添加为 tag标签
  row.tags.push(val)
}
</script>

<style scoped>
/* 主容器样式 - 更新为类似学习计划表的风格 */
.goods-management-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  /* background-color: #cefffc; */
    background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.zAUkUwy2yw7zDWDxUCFzlwAAAA?r=0&rs=1&pid=ImgDetMain');
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

/* 标题区域样式 - 更简洁的样式 */
.goods-header {
  padding: 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.goods-title {
  color: #333;
  font-weight: 600;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 1em;
}

/* 表格样式 - 更简洁的边框 */
.goods-table {
	background-image: linear-gradient(45deg, rgba(208, 252, 255, 0.5) ,rgba(217, 255, 220, 0.7));
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

/* 价格单元格样式 - 更柔和的颜色 */
.price-cell {
  color: #2a8fbd;
  font-weight: 500;
  min-width: 100px;
}

/* 标签单元格样式 */
.tag-cell {
  min-width: 250px;
}

/* 标签输入框样式 - 更简洁的边框 */
.tag-input {
  width: 100px;
  display: inline-block;
  margin-right: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

/* 添加标签按钮样式 - 更简洁的按钮 */
.add-tag-btn {
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  margin-right: 8px;
  font-size: 0.8rem;
  border: 1px solid #2a8fbd;
  color: #2a8fbd;
  background-color: transparent;
}

/* 标签项样式 - 更简洁的标签 */
.tag-item {
  background-color: #f0f0f0;
  color: #555;
  margin-right: 8px;
  padding: 0.25em 0.6em;
  font-weight: normal;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* 删除按钮样式 - 更简洁的按钮 */
.delete-btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border: 1px solid #dc3545;
  color: #dc3545;
  background-color: transparent;
  border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .goods-management-container {
    padding: 15px;
    margin: 10px;
  }
  
  .goods-header {
    padding: 10px 0;
  }
  
  .tag-cell {
    min-width: 200px;
  }
}
/* 文字跳跃动画 */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.jump-char {
  display: inline-block;
  animation-name: jump;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
</style>